{literal}
<script type="text/javascript">
function suggestion (_num) {
    
    $("#textbox"+_num).focus().autocomplete(cities);
}
</script>
{/literal}
<div id="main_container">
    {$oZoneHeader}
    <div class="main_content">
        {$oZoneTopMenu}
        <div class="center_content">  
            <div class="left_content">
                {$oZoneLeftMenu}
                <h4>Les marques</h4>
                <a class="bt_green" id="ajouter" href="{jurl 'marqueModele~BoMarque:index'}"><span class="bt_green_lft"></span><strong>Ajouter</strong><span class="bt_green_r"></span></a>
                {literal}
                <script >
                    $(function() {
                        $( "#sortable" ).sortable({ opacity: 0.6, cursor: 'move', update: function() {
                                var order = $(this).sortable("serialize") ;
                                $.post("{/literal}{jurl 'marqueModele~BoMarque:reOrder', array(), false}{literal}", order);
                            }
                        });
                        $( "#sortable" ).disableSelection();
                    });
                </script>                    
                {/literal} 
                <ul id="sortable">
                    {foreach $liste as $item}
                    <li title="Glisser pour ré ordonner" id="tiMarqueIds_{$item->marque_id}" class="ui-state-default"><label>{$item->marque_libelle}</label>  <a title="Editer" href="{jurl 'marqueModele~BoMarque:index', array('iId'=>$item->marque_id), false}" class="det">{image $j_basepath.'design/back/img/ico_detail.png',array('title'=>'','alt'=>'','border'=>0)}</a></li> 
                    {/foreach}
                </ul>
            </div>
    
            <div class="right_content">
                {if $id}
                    <h2>Editer une marque</h2> 
                    {assign $disabled = "DISABLED"}
                {else}
                    <h2>Ajouter une marque</h2> 
                    {assign $disabled = ""}

                {/if} 
                    
                <form action="{jurl 'marqueModele~BoMarque:sauvegarder'}" method="post" id="editCompte" name="editCompte" enctype="multipart/form-data">
                    <input type="hidden" name="marque_id" value="{$marque->marque_id}" id="marqueId"  />
                    <input type="hidden" name="marque_ordre" value="{$marque->marque_ordre}" id="marque_ordre"  />
                    <input type="hidden" name="zz" value="" id="zz" class="ask" />
                   <dl>
                        <dt><label>Libelle *: </label></dt>
                        <dd><input type="text"  value="{$marque->marque_libelle}" name="marque_libelle" id="marqueLibelle" validation="required" /></dd>
                   </dl>
                             
                  <div id='TextBoxesGroup'>
                      {literal}
                        <script>
                            $(function() {
                                $( "#sortablemodele" ).sortable({ opacity: 0.6, cursor: 'move', update: function() {
                                        var order = $(this).sortable("serialize") ;
                                        $.post("{/literal}{jurl 'marqueModele~BoMarque:reOrderModele', array(), false}{literal}", order);
                                    }
                                });
                            });
                        </script>                    
                    {/literal}
                    
                    {if $id && sizeof($allMarque)}
                      
                         <span>
                            <label  style="position:relative;top:15pt;display:block">Modele : </label>
                        </span>
                         <div id="TextBoxDiv">
                             <ul id="sortablemodele" >
                              {foreach $allMarque as $k=>$item}
                                
                                <li  title="Glisser pour ré oordonner" id="tiModeleIds_{$item->modele_id}" class="ui-state-default TextBoxDiv{$k}">
                                    <input class="suggest" type="text" name="textbox{$k}" id="textbox{$k}" value="{$item->modele_libelle}" onfocus="suggestion({$k})" />
                                    <input num="{$k}" type="button" value="Supprimer" class="removeButton TextBoxDiv{$k}" onclick="removebtn({$k})" />
                                </li>
                                
                              {/foreach}
                             </ul>
                         </div>
                       
                    {else}
                    <span>
                        <label  style="position:relative;top:15pt;display:block">Modele : </label>
                    </span>
                    
                        
                        <ul id="sortablemodele" style="margin-left:118pt;display:block;" >
                            <li class="liInitial" >
                                <input class="suggest" type="text" name="textbox" id="textbox"  />
                                <input type="button" class="supprInitial" value="Supprimer" style="display:none;" onclick="removeLi('.liInitial')" />
                            </li>
                        </ul>
                        
                        <br />
                        <br />
                    {/if}
                    </div>
                    
                            <div class="rbtn"><input type='button' value='Ajouter' id='addButton'></div>
                            <br />
                            <dl>
                                <dt><label class="nPadd2">Mise en avant : </label></dt>
                                <dd><input type="checkbox"  value="1" name="marque_enAvant" id="marque_enAvant" {if $marque->marque_enAvant} checked {/if}/></dd>
                            </dl>
                    <dl style="height:auto"> 
                    <dt><label>Logo  : </label></dt>
                    <dd><input type="text" id="marque_logo" name="marque_logo" value="{$marque->marque_logo}" readonly="readonly" style="width:300px;cursor:pointer" />
                        <input type="button" id="btnParcourir" value="Parcourir ..." />
                        <script type="text/javascript">
                            {literal}
                            function openKCFinder(field) {
                                window.KCFinder = {
                                    callBack: function(url) {
                                        window.KCFinder = null;
                                        // field.value = url;
                                        field.val(url) ;
                                    }
                                };
                                window.open(j_basepath+'kcfinder/browse.php?type=images&dir=images/', 'kcfinder_textbox',
                                    'status=0, toolbar=0, location=0, menubar=0, directories=0, ' +
                                    'resizable=1, scrollbars=0, width=800, height=600'
                                );
                            }
                            $(function(){
                                $('#btnParcourir').click(function(){
                                    var cible = $(this).prev('input');
                                    openKCFinder (cible) ;
                                });
                            });
                            {/literal}
                        </script>
                    </dd>
                     <img src="{$marque->marque_logo}" alt="" width="90" height="60" />
                  </dl>

                   <dl class="submit">
                        <input  id ="valider-annonce" class="valider" title="Valider" type="submit" value="" style="margin-right:10px;"/>
                        {if $id && $estSupprimable}
                 		<a title="Annuler" href="{jurl 'marqueModele~BoMarque:supprimer', array('id'=>$id)}" class="bt_red"><span class="bt_red_lft"></span><strong>Supprimer</strong><span class="bt_red_r"></span></a>
                        {/if}
                   </dl>
               </form>
            </div><!-- end of right content-->
        </div>   <!--end of center content -->               

        <div class="clear"></div>
    </div> <!--end of main content-->
    
    
    <div class="footer">
    </div>

</div>   


<!-- Script autocompletion--> 
{literal}
	<script type="text/javascript">

	var cities = {/literal}{$libelle_modele}{literal};

	$(".suggest").focus().autocomplete(cities);
	
	 </script>
{/literal}


<!-- Script for add_remove content-->   
{literal}
	<script type="text/javascript">
    
	function removebtn (_num) {
		if(getLastCounter () >2) $("#TextBoxDiv"+_num).remove();
        else {
            $("#TextBoxDiv"+_num).remove();
            $('#sortablemodele li .removeButton').hide("fast");
        }
	}
        
    function removeLi(_num){
        if(getLastCounter () >2) $(_num).remove();
        else {
            $(_num).remove();
            $('#sortablemodele li .removeButton').hide("fast");
            $('#sortablemodele li .supprInitial').hide("fast");
            console.log("eee");
        }
    }
	
	function getLastCounter () {
		counterField = 0;
		$('.suggest').each(function () {
            counterField++;
        });
        return counterField;
	}
    $(function () {   
     var counter = getLastCounter();
        $("#addButton").click(function () {    
           var newTextBoxDiv = $(document.createElement('li'))
                .attr("id","li" + counter);

           newTextBoxDiv.after().html('<input class="suggest" type="text" name="textbox' + counter + 
                  '" id="textbox' +counter + '" value="" onfocus="suggestion('+counter+')">'+
                  '<input num='+ counter +' type="button" value="Supprimer' +
                  '" class="removeButton' + '" onclick="removeLi(\'#li'+counter+'\')">'

                  );

            newTextBoxDiv.appendTo("#sortablemodele");
            $(".supprInitial").show("fast");
            $(".removeButton").show("fast");
            counter++;
         });
         
         
     
         $(".removeButton").bind('click', function () {

            var num = $(this).attr('num'); 
            $("#TextBoxDiv"+num).remove();
            $(".TextBoxDiv"+num).remove();
     
         });
     
         $("#getButtonValue").click(function () {
     
        var msg = '';
        for(i=1; i<counter; i++){
          msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
        }
              alert(msg);
         });

         
    });
    </script>
{/literal}

{literal}
    <style type="text/css">
        p label {
            width:400px;margin-right:20px;
        }
        p span {float:right;margin-right:350px;}
        .iomoue {position:relative;left:-156px;}
        #TextBoxesGroup div, #editCompte .rbtn{width:100%; display:block; clear:left; margin-left:152px;}

    </style>
    <script type="text/javascript">
       

        // form validation
        var demoForm = $("#editCompte");
        demoForm.validation();
        demoForm.submit(function(e) {

            $("#valid-form").remove();
            if(demoForm.validate()) {
                document.forms["editCompte"].submit();
            }
            e.preventDefault();
        });
    </script>
{/literal}

